<template>
	<div>
	<div class="nav">
		<router-link tag="div" to="/home/recommendingmusic" class="tabtitle">
			<div class="tabtxt" :class="{active:curIndex===0}">
				<span>推荐音乐</span>
			</div>
		</router-link>
		
		<router-link tag="div" to="/home/hotsonglist" class="tabtitle">
			<div class="tabtxt" :class="{active:curIndex===1}">
				<span>热歌榜</span>
			</div>
		</router-link>
		
		<router-link tag="div" to="/home/search" class="tabtitle">
			<div class="tabtxt" :class="{active:curIndex===2}">
				<span>搜索</span>
			</div>
		</router-link>
	</div>
	</div>
</template>

<script>
	export default{
		mounted(){
		this._setCurIndex(this.$route.fullPath)
		},
		data () {
			return {
				curIndex:0
			}
		},
		watch: {
//				监听路由变化
				$route(newValue){
							this._setCurIndex(newValue.fullPath)
				}
		},
		methods: {
		    _setCurIndex(fullPath){
					if(/search/.test(fullPath)){
						this.curIndex=2
					}
					if(/hotsonglist/.test(fullPath)){
						this.curIndex=1
					}
					if(/recommendingmusic/.test(fullPath)){
						this.curIndex=0
					}
			}
		  } 
	}
</script>

<style lang="scss" scoped>
	@charset "utf-8";
	$fs:64px;
	html{
	    font-size: $fs;
	}
	@function r($px){
	    @return $px/$fs*1rem;   
		
	}
	.nav{
	    position: fixed;
	    top: r(128px);
	    left: 0;
	    z-index: 999;
	    width: 100%;
	    height: r(80px);
	    background: #fff;
	    display: flex;
	    align-items: center;
	    border-bottom: r(2px) solid rgba(0,0,0,.1);
	    overflow: hidden;
	    .tabtitle{
	    	flex: 1;
		    width: 33.3%;
		    height: 100%;
		    text-align: center;
		    cursor: pointer;
		    font-size:0;
		    .tabtxt{
		    	display: inline-block;
		    	height: 100%;
			    padding: 0 r(10px);
			    color: #333;
			    font-size: r(30px);
			    line-height: r(80px);
			}
			.active{
			  color: #d33a31;
			  border-bottom: r(4px) solid #d33a31;
			}
	    }
	}
</style>